<template>
  <div class="index-menu menu">
    <ul class="nav nav-pills" role="tablist">
      <li :class="tabClasses.tab0[activeTab]" data="0" @click="clickMenu(0,'/dynamic')">
        <a>
          <div>
            <i class="iconfont icon-dongtai"></i>
          </div>
          <div>动态</div>
        </a>
      </li>
      <li :class="tabClasses.tab1[activeTab]" data="1" @click="clickMenu(1,'/greatman/bestmanbox')">
        <a>
          <div>
            <i class="iconfont icon-niuren"></i>
          </div>
          <div>牛人</div>
        </a>
      </li>
      <li :class="tabClasses.tab2[activeTab]" data="2" @click="clickMenu(2,'/greatstock/beststockbox')">
        <a>
          <div>
            <i class="iconfont icon-niugu"></i>
          </div>
          <div>牛股</div>
        </a>
      </li>
      <li :class="tabClasses.tab3[activeTab]" data="3" @click="clickMenu(3,'/game')">
        <a>
          <img class="game-tab-png" src="~assets/images/bisai_color@2x.png">
        </a>
      </li>
      <li :class="tabClasses.tab4[activeTab]" data="4" @click="clickMenu(4,'/moments.html')">
        <a>
          <div>
            <i class="iconfont icon-quanzi"></i>
          </div>
          <div>圈子</div>
        </a>
        <img class="quanzi-new-png" src="~assets/images/new.png">
      </li>
    </ul>
  </div>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  /**
   * 首页Tab组件
   */
  export default {
    data () {
      return {
        title: '牛人牛股',
        activeTab: 0,
        tabClasses: {
          tab0: ['active border-left-radius', 'inactive border-left-radius', 'inactive border-left-radius', 'inactive border-left-radius', 'inactive border-left-radius'],
          tab1: ['inactive', 'active', 'inactive', 'inactive', 'inactive'],
          tab2: ['inactive', 'inactive ', 'active', 'inactive', 'inactive'],
          tab3: ['inactive', 'inactive', 'inactive', 'active', 'inactive'],
          tab4: ['inactive border-right-radius', 'inactive border-right-radius', 'inactive border-right-radius', 'inactive border-right-radius', 'active']
        }
      }
    },
    created: function () {
      this.renderTab()
    },
    watch: {
      '$route.path': 'renderTab'
    },
    methods: {
      renderTab () {
        let path = this.$route.path;        //获取路由
        if (path.indexOf('dynamic') > -1) {
          this.activeTab = 0
        } else if (path.indexOf('greatman') > -1) {
          this.activeTab = 1
        } else if (path.indexOf('greatstock') > -1) {
          this.activeTab = 2
        } else if (path.indexOf('game') > -1) {
          this.activeTab = 3
        }
      },
      clickMenu (tab, path) {
        tab = Number(tab);
        if (tab != this.activeTab) {
          if(tab == 4){
            window.location.href = 'moments.html'
          } else {
            this.activeTab = tab;
            this.$router.replace(path);
            let kv = {"usercode": LocalDAO.getUserCode(), "k2": ""};
            let eventCodes = ['14002', '15001', '16001', '17001'];
            TDAPP.onEvent(eventCodes[tab], "", kv);
            TDAPP.send();
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
